<template>
	<view class="all-main">
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="欢迎进入风动社区"></u-loading-page>
		<view v-if="!loadding" class="main">
			<view class="form-list">
				<view class="form-item">
					<view class="label">
						产品
					</view>
					<view class="form-input">
						<input type="text" disabled="" placeholder-style="color:#bebfc3" v-model="product_name">
					</view>
				</view>
				<u-line></u-line>
				<view class="form-item">
					<view class="label">
						邮寄方式
					</view>
					<view class="form-input">
						<!-- <input type="text" v-model="type_name" @focus="type_click" placeholder="请选择邮寄方式"> -->
						<text @click="type_click">{{type_name}}</text>
						<u-picker :show="type_show" ref="uPicker" :columns="type_columns" keyName="name" closeOnClickOverlay
							@confirm="changeType" @cancel="type_show = false" @close="type_show = false"></u-picker>
					</view>
				</view>
			</view>
			<view class="address">
				<view class="lefts">
					<view class="userinfo">
						<text>{{addressData.name}}</text>
						<text>{{addressData.mobile}}</text>
					</view>
					<u-line dashed=""></u-line>
					<view class="address_info">
						{{addressData.province}}{{addressData.city}}{{addressData.district}}{{addressData.address}}
					</view>
				</view>
				<view class="rights" @click="addressTo">
					<u-icon name="edit-pen"></u-icon>
				</view>
			</view>
			
			<view class="bottom" @click="saveData">
				免费申领
			</view>
		</view>
	</view>
</template>

<script>
	import cityData from '@/static/js/city.js'
	export default {
		data() {
			return {
				loadding: true,
				pro_show: false,
				type_show: false,
				addressShow: false,
				is_true: true,
				id: '',
				name: '',
				phone: '',
				districts: '',
				address: '',
				product_name: '',
				type_name: '请选择邮寄方式',
				type_columns: [],
				cityList: [],
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: [],
				data: {
					province: '',
					city: '',
					district: '',
					address: ''
				},
				userinfo: {},
				addressData: {},
				type: 1
			}
		},
		onLoad(e) {
			this.userinfo = uni.getStorageSync('userinfo');
			this.name = this.userinfo.nickname
			this.phone = this.userinfo.mobile
			this.id = e.id
			this.product_name = e.name
			this.initCityData()
			this.getAddress()
			this.getReceiveType()
		},
		onShow() {
			this.getAddress()
		},
		methods: {
			// 获取收货类型
			async getReceiveType() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'V1/getReceiveType'
				});
				if (res.code == 1) {
					this.type_columns = [res.data]
				}
			},
			// 免费申领
			async saveData() {
				if (this.type == '') {
					uni.showToast({
						title: '请选择邮寄方式',
						icon: "none"
					});
					return false
				}
				if (!this.addressData.id || this.addressData.id <= 0) {
					uni.showToast({
						title: '请选择地区',
						icon: "none"
					});
					return false
				}
				var data = {
					product_id: this.id,
					address_id: this.addressData.id,
					type: this.type
				}
				if (this.is_true) {
					this.is_true = false
					uni.showLoading({
						title: '加载中'
					});
					const {
						data: res
					} = await this.$myHttp5({
						url: 'v1/saveProductApply',
						data: data,
						header: {
							'token': this.userinfo.token
						}
					});
					uni.hideLoading()
					this.is_true = true
					if (res.code == 1) {
						uni.showToast({
							title: '申领信息提交成功！',
							icon: "none"
						});
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/index/index'
							})
						},1500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}
			},
			// 获取地址
			async getAddress() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Order/getDefaultAddress',
					header: {
						'token': this.userinfo.token
					}
				});
				uni.hideLoading()
				this.loadding = false
				if (res.code == 1) {
					this.addressData = res.data
				}
			},
			// 打开地区选择器
			district() {
				this.addressShow = true
			},
			// 地区选择器初始化
			initCityData() {
				// 遍历城市js
				cityData.forEach((item1, index1) => {
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);
					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) => {
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) => {
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;
					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
			},
			// 选中时执行
			changeHandler(e) {
				const {
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) { // 选择第一列数据时
					// 设置第二列关联数据
					picker.setColumnValues(1, this.cityLevel2[index]);
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
				} else if (columnIndex === 1) { // 选择第二列数据时
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
				}
			},
			// 单击确认按钮时执行
			confirm(e) {
				// 输出数组 [省, 市, 区]
				this.districts = e.value.join("/")
				this.data.province = e.value[0]
				this.data.city = e.value[1]
				this.data.district = e.value[2]
				// 隐藏城市选择器
				this.addressShow = false;
			},
			// 点击选择邮寄方式
			type_click() {
				this.type_show = true
			},
			// 选择邮寄方式
			changeType(e) {
				this.type_show = false
				this.type = e.value[0].id
				this.type_name = e.value[0].name
			},
			// 选择地址
			addressTo() {
				uni.navigateTo({
					url: '/pages/version5/index/shop/address/index?tp=3&id=' + this.id + '&name=' + this.name
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}
	
	.all-main {
		.main {
			padding: 30rpx;
			.form-list {
				background-color: #ffffff;
				border-radius: 12rpx;
				
				.form-item {
					padding: 20rpx;
					display: flex;
					justify-content: space-between;
					
					input {
						text-align: right;
					}
				}
			}
			
			.address {
				margin-top: 30rpx;
				background-color: #ffffff;
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				
				.lefts {
					width: 90%;
					.userinfo {
						padding-bottom: 8rpx;
						text {
							font-size: 28rpx;
							padding-right: 16rpx;
						}
					}
					
					.address_info {
						padding-top: 8rpx;
						font-size: 26rpx;
					}
				}
				
				.rights {
					width: 10%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
			
			.bottom {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				text-align: center;
				background-color: #2b85e4;
				color: #ffffff;
				padding: 40rpx;
				font-size: 36rpx;
				font-weight: bold;
				border-top-left-radius: 12rpx;
				border-top-right-radius: 12rpx;
			}
		}
	}
</style>
